<template>
  <div class="app-container">
    <el-card class="box-card">
      <div>
        <el-form ref="dataForm" size="mini" :inline="true" :model="dataForm">
          <div style="margin-left: 20px;padding-top:20px;">
            <el-row>
              <el-form-item label="设备编码:" prop="deviceNo">
                <el-input v-model="dataForm.deviceNo" @change="dateChange" placeholder="精确查询" clearable/>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" :loading="dataListLoading" @click="drawLineChart()">查询</el-button>
              </el-form-item>
            </el-row>
          </div>
        </el-form>
      </div>
      <div style="font-weight:bold;font-size: 20px">设备情况概况</div>
      <div class="contentDiv">
        <div class="imageDiv"><img width="200px" src="src/assets/img/device.png"/></div>
        <el-form ref="record" :inline="true" size="small" style="margin: auto">
          <div class="infoDiv1">
            <div class="infoRight1">
              <div>制造编码：{{ record.deviceNo }}</div>
            </div>
            <div class="infoRight2">
              <div>设备名称：</div>
            </div>
          </div>
          <div class="infoDiv2">
            <div class="infoRight1">
              <div>机&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型：</div>
            </div>
            <div class="infoRight2">
              <div>设备状态：{{ record.deviceStatus }}</div>
            </div>
          </div>
          <div class="infoDiv3">
            <div class="infoRight1">
              <div>预置电流：{{ record.prefabCurrent }}A</div>
            </div>
            <div class="infoRight2">
              <div>焊接电流：{{ record.weldCurrent }}A</div>
            </div>
          </div>
          <div class="infoDiv4">
            <div class="infoRight1">
              <div>预置电压：{{ record.prefabVoltage }}V</div>
            </div>
            <div class="infoRight2">
              <div>焊接电压：{{ record.weldVoltage }}V</div>
            </div>
          </div>
        </el-form>
      </div>
    </el-card>
    <el-card class="box-card">
      <div style="font-weight:bold;font-size: 20px">实时数据曲线</div>
      <div style="width:100%;height:400px" ref="chart"/>
    </el-card>
  </div>
</template>

<script>
import moment from 'moment'
import * as echarts from 'echarts'
export default {
  name: 'deviceRunParam',
  data () {
    return {
      dataForm: {
        deviceNo: ''
      },
      record: {},
      dataList: [],
      dataListLoading: false
    }
  },
  activated () {
    this.drawLineChart(this.$route.query.deviceNo)
    this.dataForm.deviceNo = this.$route.query.deviceNo
  },
  methods: {
    // 绘制曲线
    drawLineChart (deviceNo) {
      // 初始化
      const that = this
      let myChart = echarts.init(that.$refs.chart)
      const params = {}
      params.deviceNo = deviceNo || this.dataForm.deviceNo
      console.log('查询参数', params)
      if (!params.deviceNo) {
        myChart.clear()
        that.record = ''
        return
      }
      // 请求后台
      this.$http({
        url: this.$http.adornUrl('TotalFactor/device-run-data/param'),
        method: 'get',
        params: params
      }).then(function (resp) {
        console.log(resp)
        if (resp.data.massage) {
          myChart.clear()
          that.record = ''
          return that.$message({
            message: resp.data.massage,
            type: 'error',
            duration: 3000
          })
        }
        that.dataList = resp.data.data.dataList
        if (that.dataList.length === 0) {
          myChart.clear()
          console.log('清除历史数据')
          return
        }
        // 进行XY轴区分
        var xAxis = []
        var y1Axis = []
        var y2Axis = []
        for (let i = 0; i < that.dataList.length; i++) {
          xAxis.push(moment(`${that.dataList[i].requestTime}`, 'HHmmss').format('HH:mm:ss'))
          y1Axis.push(that.dataList[i].weldVoltage)
          y2Axis.push(that.dataList[i].weldCurrent)
        }
        console.log('X轴', xAxis)
        console.log('Y1轴', y1Axis)
        console.log('Y2轴', y2Axis)
        // 绘制图表
        myChart.setOption({
          title: {},
          tooltip: {},
          xAxis: {
            data: xAxis
          },
          yAxis: {},
          series: [
            {
              name: '焊接电压(V)',
              type: 'line',
              data: y1Axis,
              yAxisIndex: 0,
              label: {
                show: true,
                position: 'top',
                textStyle: {
                  fontSize: 14
                }
              }
            },
            {
              name: '焊接电流(A)',
              type: 'line',
              position: 'right',
              data: y2Axis,
              yAxisIndex: 0,
              label: {
                show: true,
                position: 'top',
                textStyle: {
                  fontSize: 14
                }
              }
            }]
        })
        myChart.on('mouseover', function (param) {
          // 触发悬浮事件
          that.queryDetails(param)
        })
        console.log('请求成功：' + resp.data.data.status + ',' + resp.data.data.statusText)
      }).catch(resp => {
        console.log('请求失败：' + resp.data.data.status + ',' + resp.data.data.statusText)
      })
    },
    // 查询详情
    queryDetails (param) {
      console.log(param)
      const params = {}
      params.deviceNo = this.dataForm.deviceNo
      params.requestTime = param.name.replaceAll(':', '')
      console.log('查询参数', params)
      // 请求后台
      const that = this
      this.$http({
        url: this.$http.adornUrl('TotalFactor/device-run-data/details'),
        method: 'get',
        params: params
      }).then(function (resp) {
        console.log(resp)
        if (resp.data.massage) {
          return that.$message({
            message: resp.data.massage,
            type: 'error',
            duration: 3000
          })
        }
        that.record = resp.data.data
        console.log(that.record)
        console.log('请求成功：' + resp.data.data.status + ',' + resp.data.data.statusText)
      }).catch(resp => {
        console.log('请求失败：' + resp.data.data.status + ',' + resp.data.data.statusText)
      })
    },
    // 触发器
    dateChange () {
      this.drawLineChart()
    }
  }
}
</script>
<style>
.contentDiv {
  height: 210px;
  width: 100%;
  font-size: 15px;
}

.imageDiv {
  position: absolute
}

.infoDiv1 {
  height: 210px;
  margin-left: 230px;
  position: absolute;
}

.infoDiv2 {
  height: 210px;
  margin-left: 450px;
  position: absolute
}

.infoDiv3 {
  height: 210px;
  margin-left: 650px;
  position: absolute
}

.infoDiv4 {
  height: 210px;
  margin-left: 850px;
  position: absolute
}

.infoRight1 {
  padding-top: 65px;
  padding-left: 30px;
}

.infoRight2 {
  padding-top: 30px;
  padding-left: 30px;
}
</style>
